<template>
  <div id="windowEditorComponent" v-loading="loading_file_show">
    <codemirror
        v-if="file_read_status===200"
        ref="codemirror"
        v-model="editFileStr"
        placeholder="Code goes here..."
        :style="{ height: height + 'px' }"
        :autofocus="true"
        :indent-with-tab="true"
        :tab-size="2"
        :extensions="extensions"
        :extraKeys="{Ctrl: 'autocomplete'}"
    />
    <h1 style="margin: 20px" v-if="file_read_status!==200">{{ editFileStr }}</h1>
  </div>

</template>

<script>
import axios from 'axios'
import {ElNotification} from 'element-plus'
import {Codemirror} from 'vue-codemirror'
import {javascript} from '@codemirror/lang-javascript'
// import {oneDark} from '@codemirror/theme-one-dark'

export default {
  name: "windowEditorComponent",
  props: {
    sessionToken: String,
    editFileUrl: String,
    width: Number,
    height: Number,
    curr_editableTabsValue: String,
  },
  components: {
    Codemirror
  },
  data() {
    return {
      editFileStr: "",
      loading_file_show: false,
      extensions: [javascript(), ],//oneDark
      file_read_status: 0,
      // edit_file_str: "",
    }
  },
  methods: {
    load_file_with_session_token() {
      if (this.spec_path === "") return
      let obj_this = this
      obj_this.loading_file_show = true
      let data = {
        "session_token": obj_this.sessionToken,
        "file_path": obj_this.editFileUrl
      }
      axios.post('/get_file_str_with_session_token', data).then(function (response) {
        obj_this.file_read_status = response.data.status
        obj_this.editFileStr = response.data.data
        obj_this.loading_file_show = false
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      }).then(function () {

      });
    },
    save(type) {
      // console.log(this.curr_editableTabsValue, this.$store.state.curr_editor_file_path, type)
      console.log(this.editFileUrl + `content saved by ${type}`)
      let obj_this = this
      obj_this.loading_file_show = true
      let data = {
        "session_token": obj_this.sessionToken,
        "save_type": type,
        "file_path": obj_this.editFileUrl,
        "file_str": obj_this.editFileStr,
      }
      axios.post('/save_file_str_with_session_token', data).then(function (response) {
        ElNotification({
          title: response.data.msg_str,
          type: 'success',
          duration: 1000,
        })
        obj_this.loading_file_show = false
      }).catch(function (error) { // 请求失败处理
        console.log(error);
      }).then(function () {

      });
    },
    saveContent(e) {
      let key = window.event.keyCode ? window.event.keyCode : window.event.which
      if (key === 83 && e.ctrlKey) {
        if (this.curr_editableTabsValue === this.$store.state.curr_editor_file_path) {
          this.save('CtrlS')
        }
        e.preventDefault()
      }
    }
  },
  mounted() {
    this.load_file_with_session_token()
    document.addEventListener('keydown', this.saveContent)
  }
}
</script>

<style scoped>
#windowEditorComponent {
  height: 100%;
  width: 100%;
}
</style>